<template>
	<div class="login">
		<div class="login-form-box">
			<h3 class="subtitle">用户登录</h3>
			<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入账号">
						<div slot="prepend" class="input_slot_box">
							<img src="@/assets/login/user.png" class="img_slot" />
						</div>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin">
						<div slot="prepend" class="input_slot_box">
							<img src="@/assets/login/password.png" class="img_slot" />
						</div>
					</el-input>
				</el-form-item>
				<div>
					<el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
				</div>
				<div :loading="loading" @click.prevent="handleLogin" class="login-btn button hvr-grow">
					<span v-if="!loading">登 录</span>
					<span v-else>登录中...</span>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
import Cookies from "js-cookie"
import { encrypt, decrypt } from "@/utils/jsencrypt"

export default {
	name: "Login",
	data() {
		return {
			codeUrl: "",
			loginForm: {
				// 账号admin   密码   admin123
				username: "",
				password: "",
				rememberMe: false,
				code: "",
				uuid: ""
			},
			loginRules: {
				username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
				password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
				code: [{ required: true, trigger: "change", message: "请输入验证码" }]
			},
			loading: false,
			// 验证码开关
			captchaEnabled: true,
			// 注册开关
			register: false,
			redirect: undefined
		}
	},
	watch: {
		$route: {
			handler: function (route) {
				this.redirect = route.query && route.query.redirect
			},
			immediate: true
		}
	},
	created() {
		this.getCookie()
	},
	methods: {
		getCookie() {
			const username = Cookies.get("username")
			const password = Cookies.get("password")
			const rememberMe = Cookies.get("rememberMe")
			this.loginForm = {
				username: username === undefined ? this.loginForm.username : username,
				password: password === undefined ? this.loginForm.password : decrypt(password),
				rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
			}
		},
		handleLogin() {
			this.$refs.loginForm.validate(valid => {
				if (valid) {
					this.loading = true
					if (this.loginForm.rememberMe) {
						Cookies.set("username", this.loginForm.username, { expires: 30 })
						Cookies.set("password", encrypt(this.loginForm.password), {
							expires: 30
						})
						Cookies.set("rememberMe", this.loginForm.rememberMe, {
							expires: 30
						})
					} else {
						Cookies.remove("username")
						Cookies.remove("password")
						Cookies.remove("rememberMe")
					}
					this.$store
						.dispatch("Login", this.loginForm)
						.then(() => {
							// this.$router.push({ path: this.redirect || "/" }).catch(() => {})
              this.$router.push({ path: "/" }).catch(() => {})
						})
						.catch(() => {
							this.loading = false
						})
				}
			})
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: url("../assets/login/login-background.png") no-repeat center;
	background-size: cover;
	background-position: center center;
	position: relative;
	.subtitle {
		text-align: center;
		letter-spacing: 0.3vw;
		font-size: 30px;
		font-family: Adobe Heiti Std R;
		font-weight: bold;
		color: #ffffff;
	}
	.login-form-box {
		position: absolute;
		top: 50%;
		right: 10%;
		transform: translateY(-50%);
		width: 33.7%;
		.login-form {
			width: 100%;
			height: 50vh;
			background: url("../assets/login/form-bg.png") no-repeat;
			background-size: 100% 100%;
			padding: 5vw 3.95vw 0;
			box-sizing: border-box;

			.el-form-item:first-child {
				margin: auto;
				margin-bottom: 2.8vw;
			}

			// 验证码
			.verification-code {
				width: 33%;
				height: 3.5vh;

				img {
					cursor: pointer;
					position: relative;
					left: -0.1vw;
					top: 0.1vw;
					height: 3.14vh;
				}
			}

			.input_slot_box {
				height: 100%;
				display: flex;
				// flex-direction: row;
				align-items: center;

				.img_slot {
					width: 26px;
					height: 27px;
				}
			}

			.login-btn {
				color: #bfd9fc;
				background-color: #329bb1;
				border: none;
				height: 6vh;
				line-height: 6vh;
				font-size: 1.25vw;
				border-radius: 5px;
				font-family: MicrosoftYaHei;
				text-align: center;
				margin-top: 30px;
				cursor: pointer;
			}
			::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
				color: #329bb1;
				font-size: 0.83vw;
			}

			// 修改选择框颜色
			.el-checkbox__input.is-checked .el-checkbox__inner,
			.el-checkbox__input.is-indeterminate .el-checkbox__inner {
				border-color: #e9eef4 !important;
				background-color: #329bb1 !important;
			}
			.el-checkbox__input.is-focus .el-checkbox__inner {
				border-color: #329bb1 !important;
			}
			.el-checkbox {
				color: #bfd9fc;
				margin-right: 30px;
				font-size: 16px;
				margin-bottom: 18px;
			}
			// 修改选择框大小
			.el-checkbox__inner {
				width: 16px;
				height: 16px;
			}
			// 修改选择label字体颜色
			.el-checkbox__input.is-checked + .el-checkbox__label {
				color: #a3efff !important;
			}
			.el-input__inner {
				height: 6vh !important;
				max-height: 60px;
				color: #fff;
				background: #17829b;
				border: 1px solid #329bb1;
			}
			.el-input-group__prepend {
				background-color: #329bb1;
				border: 1px solid #329bb1;
				border-right: none;
				height: 5vh !important;
			}
			// 修改中心对号大小以及位置
			.el-checkbox__inner::after {
				left: 4px;
				height: 9px;
				width: 5px;
				top: 0;
			}
		}
	}
}
</style>
